<template>
  <div>
    <el-dialog title="服务器状态监控"
               v-if="visible"
               :visible.sync="visible"
               :close-on-click-modal="false"
               width="75%"
               :before-close="handleClose">
      <div class="dialog_title">{{ `服务器ip：${ip}` + '&emsp;&emsp;' + `服务器名称：${fwqname}` + '&emsp;&emsp;' + `状态：${status == '1'?'在线':'离线'}`}}</div>
      <el-scrollbar style="height:650px">
        <div style="width:100%;display:flex;justify-content:space-between">
          <el-card class="box-card"
                   style="width:30%">
            <div slot="header"
                 class="clearfix">
              <span>CPU</span>
            </div>
            <el-form :model="CPUform"
                     ref="CPUform"
                     size="small"
                     label-width="110px">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="核心数：">
                    {{ CPUform.hxs || 0}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="用户使用率：">
                    {{ (CPUform.yhsyl || 0) + ' %' }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="系统使用率：">
                    {{ (CPUform.xtsyl || 0) + ' %' }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="当前空闲率：">
                    {{ (CPUform.dqkxl || 0)+ ' %' }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <el-card class="box-card"
                   style="width:30%">
            <div slot="header"
                 class="clearfix">
              <span>内存</span>
            </div>
            <el-form :model="memoryform"
                     ref="memoryform"
                     size="small"
                     label-width="110px">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="总内存：">
                    {{ (memoryform.znc || 0) + ' G'}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="已用内存：">
                    {{ (memoryform.yync || 0) + ' G' }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="剩余内存：">
                    {{ (memoryform.sync || 0) + ' G' }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="使用率：">
                    {{ (memoryform.syl || 0) + ' %' }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <el-card class="box-card"
                   style="width:30%">
            <div slot="header"
                 class="clearfix">
              <span>服务器</span>
            </div>
            <el-form :model="severform"
                     ref="severform"
                     size="small"
                     label-width="110px">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-form-item label="服务器ip：">
                    {{ severform.fwqip || '--'}}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="服务器名称：">
                    {{ severform.fwqmc || '--' }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="操作系统：">
                    {{ severform.czxt || '--' }}
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="系统架构：">
                    {{ severform.xtjg || '--' }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

        </div>
        <div style="width:100%;display:inline-block;margin-top: 10px;">

          <el-card class="box-card"
                   style="width:100%">
            <div slot="header"
                 class="clearfix">
              <span>网络</span>
            </div>
            <el-form :model="netform"
                     ref="netform"
                     size="small"
                     label-width="110px">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-form-item label="上传速度：">
                    {{ (netform.scsd || 0) + ' M/S'}}
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="下载速度：">
                    {{ (netform.xzsd || 0) + ' M/S' }}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-form>
          </el-card>

          <el-card class="box-card"
                   style="width:100%;margin-top: 10px;">
            <div slot="header"
                 class="clearfix">
              <span>硬盘</span>
            </div>
            <el-table :data="diskList"
                      border>
              <el-table-column label="盘符路径"
                               align="center"
                               prop="pflj"
                               :show-overflow-tooltip="true" />
              <el-table-column label="文件系统"
                               align="center"
                               prop="wjxt"
                               :show-overflow-tooltip="true" />
              <el-table-column label="盘符类型"
                               align="center"
                               prop="pflx"
                               :show-overflow-tooltip="true" />
              <el-table-column label="总大小"
                               align="center"
                               prop="zdx"
                               :show-overflow-tooltip="true" />
              <el-table-column label="可用大小"
                               align="center"
                               prop="kydx"
                               :show-overflow-tooltip="true" />
              <el-table-column label="已用大小"
                               align="center"
                               prop="yydx"
                               :show-overflow-tooltip="true" />
              <el-table-column label="已用百分比"
                               align="center"
                               prop="yybfb"
                               :show-overflow-tooltip="true">
                <template slot-scope="scope">
                  <span>{{ (scope?.row?.yybfb || '') + ' %' }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </el-scrollbar>
    </el-dialog>
  </div>
</template>

<script>
import { getSourceStatus } from '@/api/resource/sever-mange'
export default {
  data () {
    return {
      visible: false,
      CPUform: {
        fwqip: '',
        fwqmc: '',
        hxs: void 0,
        yhsyl: void 0,
        xtsyl: void 0,
        dqkxl: void 0,
        crttime: void 0
      },
      diskform: {
        pflj: void 0,
        wjxt: void 0,
        pflx: void 0,
        zdx: void 0,
        kydx: void 0,
        yydx: void 0,
        yybfb: void 0
      },
      memoryform: {
        znc: void 0,
        yync: void 0,
        sync: void 0,
        syl: void 0,
      },
      netform: {
        scsd: '--',
        xzsd: '--'
      },
      severform: {
        czxt: void 0,
        xtjg: void 0,
      },
      diskList: [{ pflj: '--', wjxt: '--', pflx: '--', zdx: '--', kydx: '--', yydx: '--', yybfb: '--' }],
      status: '',
      ip: '',
      fwqname: ''
    }
  },
  methods: {
    open (row) {
      this.visible = true
      if (row.isOnline == '1') {
        this.getData(row.skName, row.skIp)
      }
      this.ip = row.skIp
      this.fwqname = row.skName
      this.status = row.isOnline
    },
    getData (name, ip) {
      getSourceStatus({ name, ip }).then(res => {
        if (res.data.monitorCpu != null) {
          this.CPUform = res.data.monitorCpu
        }
        if (res.data.monitorDisk[0] && res.data.monitorDisk[0] != null) {
          this.diskList = res.data.monitorDisk
        }
        if (res.data.monitorMemory != null) {
          this.memoryform = res.data.monitorMemory
        }
        if (res.data.monitorNet != null) {
          this.netform = res.data.monitorNet
        }
        if (res.data.monitorServer) {
          this.severform = res.data.monitorServer
        }
      })
    },
    handleClose () {
      this.visible = false
      this.CPUform = {
        fwqip: '',
        fwqmc: '',
        hxs: void 0,
        yhsyl: void 0,
        xtsyl: void 0,
        dqkxl: void 0,
        crttime: void 0
      }
      this.diskList = [{ pflj: '--', wjxt: '--', pflx: '--', zdx: '--', kydx: '--', yydx: '--', yybfb: '--' }]
      this.memoryform = {
        znc: void 0,
        yync: void 0,
        sync: void 0,
        syl: void 0,
      }
      this.netform = {
        scsd: '--',
        xzsd: '--'
      }
      this.severform = {
        czxt: void 0,
        xtjg: void 0,
      }
    }
  }

}
</script>

<style lang="scss" scoped>
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.dialog_title {
  height: 32px;
  font-weight: 600;
  line-height: 32px;
  margin-left: 5px;
  margin-bottom: 5px;
  padding-left: 5px;
  position: relative;
  color: #000;
  z-index: 0;

  border-radius: 16px;
  border: 1px solid #e8e9fb;
  box-shadow: 0 0 10px #e8e9fb;
  text-align: center;
  width: 600px;
  color: #12a3f5;

  &:before {
    content: "";
    width: 100%;
    height: 2px;
    background: #e8e9fb;
    position: absolute;
    top: 15px;
    left: 100%;
    background: linear-gradient(to right, #e8e9fb, rgba(255, 255, 255, 0));
  }
}
</style>